<template>
  <div class="chartsBox">
    <div v-show="!noData" ref="homeCharts" style="width: 100%; height: 185px"></div>
    <div v-show="noData" style="width: 100%; height: 185px"><a-empty /></div>
  </div>
</template>
<script lang="ts" setup>
import * as echarts from 'echarts';
import { ref,reactive , defineExpose, watch, nextTick } from 'vue';
const props: any = defineProps({
  chartData: {
    type: [Array, Object],
    default: () => ({}),
  },
  options: {
    type: Object,
    default: () => ({}),
  },
  setOptionsType:{
    type: String,
    default: 'bar',
  },
  flag: {
    type: String,
    default: '1',
  },
});
//颜色
let rgba1 = '';
let rgba2 = '';
if (props.flag == '1') {
  rgba1 = 'rgba(247, 138, 50, 1)';
  rgba2 = 'rgba(247, 168, 50, 0.47)';
} else {
  rgba1 = 'rgba(0, 150, 136, 1)';
  rgba2 = 'rgba(167, 230, 192, 1)';
}
let homeCharts = ref();
let noData = ref(false);
const chartInit = () => {
  let myCharts = echarts.init(homeCharts.value);
  const option = reactive({
    title: {
      text: '',
    },
    legend: {
      show: true,
    },
    color: '#3398DB',

    tooltip: {
      trigger: 'axis',
    },

    grid: {
      left: '3%',
      right: '3.5%',
      bottom: '3%',
      top: '18%',
      containLabel: true, //区域是否包含坐标轴的刻度线
    },
    xAxis: {
      data: props.chartData.xAxis&&props.chartData.xAxis.data, //可设置单个样式{value:"2023.01",textStyle:{fontSize:20,color:'red'}}
      axisTick: {
        //坐标轴刻度相关配置
        alignWithLabel: true,
        show: false,
      },
      axisLine: {
        //坐标轴轴线相关设置
        lineStyle: {
          color: '#CDC6C2',
          width: 1,
        },
      },
      axisLabel: {
        //坐标轴刻度标签的相关设置
        interval: 0, // 0强制显示所有标签，1隔一个标签显示一个标签，2各两个标签显示一个标签， auto默认会采用标签不重叠的策略间隔显示标签
        color: '#92949E',
      },
    },
    yAxis: {
      type: 'value',
      name: '单位/个',
      axisLine: {
        show: true,
        lineStyle: {
          color: '#CDC6C2',
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: '#aaa',
      },
      splitLine: {
        //网格线
        show: true, //是否显示
        lineStyle: {
          //网格线样式
          color: '#E7E7E7', //网格线颜色
          width: 1, //网格线的加粗程度
          type: 'dashed', //网格线类型
        },
      },
    },
    series: [
      {
        type: props.setOptionsType,
        barWidth: '16px',
        itemStyle: {
          color: {
            //支持纯色、渐变色、条纹颜色
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: rgba1, // 0% 处的颜色
              },
              {
                offset: 1,
                color: rgba2, // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
        data: props.chartData.series&&props.chartData.series.data,
      },
    ],
  })
  if(Object.keys(props.options).length>0){
    Object.assign(option,props.options);
  }
  myCharts.setOption(option);
  window.addEventListener('resize', () => {
    myCharts.resize();
  });
};
watch(
  () => props.chartData,
  (newVal: any) => {
    if (newVal.xAxis.data&&newVal.xAxis.data.length > 0) {
      noData.value = false;
      chartInit();
      nextTick(() => {
        window.dispatchEvent(new Event('resize'));
      });
    } else {
      noData.value = true;
    }
  },{ deep: true }
);
defineExpose({ chartInit });
</script>
<style lang="less" scope>
.chartsBox {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  position: relative;
}

.selectInfo {
  position: absolute;
  top: 10px;
  right: 31px;
  z-index: 99;
  width: 80px;
}
</style>
